---
import BaseLayout from '../../../layouts/BaseLayout.astro';
import { Badge } from '../../../components/Badge';
import { ProjectStepper } from '../../../components/Projects/StatusStepper/ProjectStepper';
import { ProjectTabs } from '../../../components/Projects/ProjectTabs';
import { officialProjectDetails } from '../../../queries/official-project';
import { ProjectContent } from '../../../components/Projects/ProjectContent';

export const prerender = false;

interface Params extends Record<string, string | undefined> {
  projectId: string;
}

const { projectId } = Astro.params as Params;

const project = await officialProjectDetails(projectId);
if (!project) {
  Astro.response.status = 404;
  Astro.response.statusText = 'Not found';
  return Astro.rewrite('/404');
}

const parentRoadmapId = project?.roadmapIds?.[0] || '';
---

<BaseLayout
  permalink={`/projects/${projectId}`}
  title={project?.seo?.title || project?.title}
  briefTitle={project?.title}
  description={project?.seo?.description || project?.description}
  keywords={project?.seo?.keywords || []}
  resourceId={projectId}
>
  <div class='bg-gray-50'>
    <div class='container'>
      <ProjectTabs
        parentRoadmapId={parentRoadmapId}
        projectId={projectId}
        activeTab='details'
      />

      <div
        class='mb-4 rounded-lg border bg-linear-to-b from-gray-100 to-white to-10% p-4 py-2 sm:p-5'
      >
        <div class='relative'>
          <div class='mb-4 hidden items-center justify-between sm:flex'>
            <div class='flex flex-row flex-wrap gap-1.5'>
              {
                project?.skills.map((skill) => (
                  <Badge variant='green' text={skill} />
                ))
              }
            </div>
            <Badge variant='yellow' text={project?.difficulty} />
          </div>
          <div class='my-2 flex items-center justify-between gap-2 sm:my-7'>
            <div class=''>
              <h1 class='mb-1 text-xl font-semibold sm:mb-2 sm:text-3xl'>
                {project?.title}
              </h1>
              <p class='text-sm text-balance text-gray-500'>
                {project?.description}
              </p>
            </div>
          </div>
        </div>

        <ProjectStepper projectId={projectId} client:load />
        <ProjectContent project={project} client:load />
      </div>
    </div>
  </div>
</BaseLayout>
